<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.min.js"></script>
  </head>
  <body>
    <!-- 
        生命周期
        beforeCreate 在此时不能获取data中的数据，也就是说this.msg得到的是undefined
        created  可以获取到除（$refs(操作dom结构)）以外的内容
        beforeMount   dom节点挂载之前
       *mounted   dom结构挂载完毕 （可以操作dom）
        beforeUpdate  dom结构准备挂载  (使用少)
       *updated  dom结构挂载完成 （使用率高）  可以操作dom结构
        beforeDestroy  销毁之前
        destroyed  销毁完成
     -->
    <div id="app" v-if="flag">
      <h2>{{count}}</h2>
      <button @click="add">++</button>
      <button @click="isShow">点击销毁</button>
    </div>
    <script>
      let vm = new Vue({
        el: "#app",
        data: {
          count: 1,
          flag: true,
        },
        methods: {
          fn() {},
        },
        beforeCreate() {
          /* 不能获取data数据*/
          console.log(this.count); //undefined
        },
        created() {
          // 读不到dom结构
          console.log(this.fn); //undefined
        },
        beforeMount() {
          console.log("准备挂载，dom节点挂载之前");
        },
        /* *** */
        mounted() {
          console.log("dom挂在完成，可以操作dom");
        },
        beforeUpdate() {
          console.log("准备挂载，数据更新之前", this.count); //2
        },
        /* *** */
        updated() {
          console.log("dom挂在完成 ，数据更新完毕，可以操作dom结构");
        },
        beforeDestroy() {
          console.log("销毁之前");
        },
        destroyed() {
          console.log("销毁完毕");
        },
        methods: {
          add() {
            this.count += 1;
          },
          isShow() {
            this.flag = false;
          },
        },
      });
    </script>
  </body>
</html>
